<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style type="text/css">
			body{
				background-image: url(img/bgbgbgbg.png);
				width: 1440px;
				height: 3162px;
			}
			header{
				width: 1440px;
				height: 118px;
				background-color: #ffffff;
				/* position: relative; */
				/*overflow: hidden; */
			}
			.logo{
				width: 82px;
				height: 77px;
				background-color: aquamarine;
				margin-left: 40px;
				margin-top: 21px;	
				float: left;
			}
			.nav{
				float: left;
				margin-left: 645px;
				margin-top: 36px;
				cursor: pointer;
			}
			.nav li{
				float: left;
				margin-right: 110px;
				position: relative;
				font-family: "微软雅黑";
				font-size: 16px;
			}
			.nav .small::before{
				content: "";
				background-color: red;
				width: 2px;
				position: absolute;
				left: -21px;
				top: 0;
				
				height: 0px;
				transition: all .3s;
				transform: rotate(35deg);
/* 				
				border-bottom: transparent; */
			}
			.nav .small::after
			{
				content: "";
				background-color: red;
				width: 2px;
				position: absolute;
				right: -15px;
				bottom: 0px;
				
				height: 0px;
				transition: all .3s;
				transform: rotate(35deg);
						
							
			/* 		
				border-bottom: transparent; */
/* 			ul li:hover::before{
				display: block; */
				/* transition-delay: 2s; */
			}
			.nav .small:hover::before{
				height: 100%;
				top: -50%;
			}
			.nav .small:hover::after{
				height:100%;
				bottom: -50%;
			}
			.fanyi{
				color: #c7c7c7;
			}
			.wechat{
				width: 22px;
				height: 21px;
				float: left;
				background-image: url(./img/微信_03.png);
				background-position: 1px -2px;
				margin-top: 36px;
			}
			#last{
				margin-right: 81px;
			}
			.lunbo{
				width: 1440px;
				height: 634px;
				background-image:url(img/轮播.png)
			}
			.white{
				width: 1440px;
				height: 412px;
				/* background-image: url(img/白图_02.png); */
				position: relative;
			}
			.step li{
				list-style: none;
/* 				width: 155px;
				height: 300px; */
				/* background-color: #10AB9D; */
				float: left;
			}
			.step li:nth-child(1){
				margin-left: 300px;
				margin-top: 84px;
				margin-right: 170px;

			}
			.step li:nth-child(2){
				margin-right: 132px;
				margin-top: 85px;
			}
			.step li:nth-child(1) p{
				margin-top: 32px;
			}
			.step li:nth-child(2) p{
				margin-top: 41px;
			}
			.step li:nth-child(3) p{
				margin-top: 41px;
			}
			.step li:nth-child(3){
				margin-top: 125px;
			}
			
			
			.step li p{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 22px;
				font-style: italic;
				font-weight: 600;
				position: relative;
			}
			.step li p::after{
				content: "选择一个游戏,换图";
				position: absolute;
				bottom: -10px;
				left: 0;
				font-family: FZLTHK;
				font-size: 14px;
				font-style: normal;
				width: 100%;
				color: #9b9d9f;
				font-weight: 100;
			}
			.mad_game{
				width: 1440px;
				height: 636px;
				/* background-color: pink; */
			}
			.mad_game_title{
				width: 1000px;
				height: 141px;
				/* background-color: aliceblue; */
				margin: 0 auto;
			}
			.box{
				width: 296px;
				height: 445px;
				background-color: bisque;
				float: left;
				transition: all .3s;
			}
			.threepart{
				margin-left: 242px;
				
			}
			.TM_GAME:hover{
				transform: translate(-10px,-10px);
				box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
			}
			#box2{
				margin-left: 24px;
				margin-right: 24px;
			}
			#last::before{
				content: "";
				background-color: red;
				width: 2px;
				height: 0;
				position: absolute;
				top: 0;
				left: -10px;
				transition: all .3s;
				transform: rotate(35deg);
			}
			#last:hover::before{
				height: 100%;
				top: -50%;
			}
			#last::after{
				content: "";
				background-color: red;
				width: 2px;
				height: 0;
				position: absolute;
				bottom: 0;
				right: -13px;
				transition: all .3s;
				transform: rotate(35deg);
			}
			#last:hover::after{
				height: 100%;
				bottom: -50%;
			}
			.kuangzhuan{
				 font-weight: 800;
				 font-size: 20px;
				 float: left;
				 font-family: FZLTHK;
				 margin-left: 34px;
				 margin-top: 49px;
			}
			.kuangzhuan span{
				font-family: Arial, Helvetica, sans-serif;
			    
			}
			.xi{
				font-weight: 100;
				color: #939393;
			}
			.sb{
				color: #bebebe;
				float: left;
				font-family: "微软雅黑";
				margin-top: 49px;
				margin-left: 10px;
			}
			span{
				font-size: 1px;
				/* color: red; */
			}
			.up{
				width: 296px;
				height: 107px;
				background-color: #eaeaea;
			}
			.game_name{
				font-size: 24px;
				font-weight: 600;
				float: left;
				margin-top: 22px;
				margin-left: 18px;
			}
/* 			.purchase{
				width: 58px;
				height: 24px;
				border-radius: 12px;
				background-color: #10ab9d;
				float: right;
				margin-top: 18px;
				margin-right: 20px;
			} */
			button{
				width: 58px;
				height: 24px;
				border-radius: 12px;
				background-color: #10ab9d;
				float: right;
				margin-top: 18px;
				margin-right: 20px;
				color: white;
				cursor: pointer;
			}
			@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?sgg8lc');
			  src:  url('fonts/icomoon.eot?sgg8lc#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?sgg8lc') format('truetype'),
			    url('fonts/icomoon.woff?sgg8lc') format('woff'),
			    url('fonts/icomoon.svg?sgg8lc#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
			}
			.star{
			 font-family: 'icomoon';
			 font-size: 30px;
			 margin-right: 21px;
			 margin-top: 7.5px;
			 cursor: pointer;
			 
			}
			.star:hover{
				color: orange;
			}
			.line2_time{
				margin-left: 20px;
				margin-top: 10px;
				color: #737373;
				position: relative;
			}
			.line2_time::after{
				content: "";
				position: absolute;
				bottom: -8px;
				width: 28px;
				height: 1px;
				background-color: #808080;
			}
			.case_share{
				height: 643px;
				width: 1440px;
				/* background-color: navajowhite; */
			}
			.caseshare_line1{
				height: 162px;
				width: 1000px;
				/* background-color: darksalmon; */
				margin: 0 auto;
				
			}
			.casetitle{
				position: relative;
				font-size: 35px;
				font-weight: 600;
				margin-left: 34px;
				margin-top: 59px;
				float: left;
				font-family: FZLTHK;
			}
			.casetitle::after{
				white-space: pre-wrap;
				font-size: 12px;
				font-weight: 100;
				color: #cbcbcb;
				content: "大家对胖糖的信赖，\A来源于其产品与需求巧妙结合的经典营销效果";
				width: 600px;
				position: absolute;
				top: 0;
				left: 230px;
/* 				content: "来源于其产品与需求巧妙结合的经典营销效果"; */
			
			}
			.casetitle_fanyi{
				font-size: 18px;
				margin-top: 10px;
				margin-left: 31px;
				font-family: Arial, Helvetica, sans-serif;
			}
			.case{
				font-weight: 600;
			}
			.caseshare_line2{
				width: 1000px;
				height: 485px;
				/* background-color: #CCCCCC; */
				margin: 0 auto;
			}
			.caseshare_box{
				width: 457px;
				height: 172px;
				/* background-color: #7FFFD4; */
				float: left;
				margin-left: 30px;
				margin-bottom: 30px;
				background-image: url(img/飞机_03.png);
				background-position: 302px;
				background-repeat: no-repeat;
			}
			.case_logo{
				width: 54px;
				height: 57px;
			}
			.case_word{
				position: relative;
				margin-left: 178px;
				margin-top: 25px;
				font-family: Tahoma;
				color: #000000;
				font-size: 16px;
				font-weight: 600;
			}
			.case_word::after{
				position: absolute;
				right: 0;
				bottom: -80px;
				text-align: right;
				white-space: pre-wrap;
				width: 180px;
				font-family: Tahoma;
				font-weight: 100;
				color: #9a9a9a;
				font-size: 12px;
				content: "飞行挑战赛\A 2014年5月14日--5月27日\A扫码关注参与飞行挑战决赛并抽奖\A既有机会赢取丰厚奖品";
				/* transform: scale(.92); */
				}
				.date{
					width: 55px;
					height: 57px;
					background-color: #fed736;
					text-align: center;
					font-size: 26px;
					font-family: helvetica;
				}
				.date p:nth-child(2){
					transform: translate(-10px, -5px) scale(.5);
					
				}
				.case_star{
					width: 55px;
					height: 57px;
					background-color: #000000;
					text-align: center;
				}
				#c-star{
					color: white;
					margin-left: 12px;
					margin-top: 12px;
				}
				#c-star:hover{
					color: orange;
				}
				.arrow_smallup{
					width: 1px;
					height: 20px;
					background-color: red;
					transform: rotate(45deg);
					position: absolute;
					top: 184px;
					left: 530px;
				}
				.arrow_smalldown{
					width: 1px;
					height: 20px;
					background-color: red;
					transform: rotate(-45deg);
					position: absolute;
					top: 170px;
					left: 530px;
				}
				.arrow_bigup{
					width: 1px;
					height: 30px;
					background-color: red;
					transform: rotate(-45deg);
					position: absolute;
					top: 161px;
					left: 540px;
				}
				.arrow_bigdown{
					width: 1px;
					height: 30px;
					background-color: red;
					transform: rotate(45deg);
					position: absolute;
					top: 182px;
					left: 540px;
				}
				.arrow:hover{
					transform: scale(2);
				}
				
		</style>
	</head>
	<body>
		<header class="clearfix">
			<div class="logo">
				<img src="img/logo_03.png" >
			</div>
			<ul class="clearfix nav">
				<li id="shouye" class="small">
					<div>首页</div>
					<div class="fanyi">home</div>
				</li>
				<li class="small">
					<div>游戏</div>
					<div class="fanyi">game</div>
				</li>
				<li class="small">
					<div>案例</div>
					<div class="fanyi">case</div>
				</li>
				<li id="last">
					<div class>关于我们</div>
					<div class="fanyi">about us</div>
				</li>
				<div class="clear"></div>
			</ul>
			
			<div class="wechat">
				<!-- <img src="img/微信_03.png" > -->
			</div>
			

		</header>
		<section>
			<div class="lunbo"></div>
			
			<div class="white">
				<ul class="step clearfix">
					<li>
						<div class="step_pic">
							<img src="./img/step1_03.png" alt="">
						</div>
						<p>STEP ONE</p>
					</li>
					<li>
						<div class="step_pic">
							<img src="img/step2_03.png" >
						</div>
						<p>STEP ONE</p>
					</li>
					<li>
						<div class="step_pic">
							<img src="img/step3_03.png" >
						</div>
						<p>STEP ONE</p>
					</li>
				</ul>
				<div class="arrow">
				<div class="arrow_small">
					<div class="arrow_smallup">
						
					</div>
					<div class="arrow_smalldown">
						
					</div>
				</div>
				<div class="arrow_big">
					<div class="arrow_bigup">
						
					</div>
					<div class="arrow_bigdown">
						
					</div>
				</div>
				</div>
			</div>
			
			<div class="mad_game">
				<div class="mad_game_title">
					<div class="kuangzhuan">
						狂转游戏<br>
						<span>TURN <span class="xi">MAD GAME</span></span>
					</div>
					<div class="sb">
						潮流趣味游戏，引发全民G点，疯狂转发。<br>还不马上购买，植入你要传播的产品？
					</div>
					<div class="clear"></div>
				</div>
			<div class="threepart">
				<div class="box TM_GAME" id="box1">
					<div class="up">
						<div class="game_name">
							剑圣传奇
						</div>
						<div class="purchase">
							<button type="button">购买</button>
						</div>
						<div class="clear"></div>
						<div class="line2">
							<div class="line2_time fl">
								2014-07-09<br>
								使用次数：20
							</div>
							<div class="star fr"></div>
						</div>
					</div>
					<div class="down">
						<img src="./img/pic1_03.png" alt="">
					</div>
					
					
				</div>
				<div class="box  TM_GAME" id="box2">
					
					<div class="up">
						<div class="game_name">
							剑圣传奇
						</div>
						<div class="purchase">
							<button type="button">购买</button>
						</div>
						<div class="clear"></div>
						<div class="line2">
							<div class="line2_time fl">
								2014-07-09<br>
								使用次数：20
							</div>
							<div class="star fr"></div>
						</div>
					</div>
					<div class="down">
						<img src="./img/pic1_03.png" alt="">
					</div>
					
				</div>
				<div class="box  TM_GAME">
					<div class="up">
						<div class="game_name">
							剑圣传奇
						</div>
						<div class="purchase">
							<button type="button">购买</button>
						</div>
						<div class="clear"></div>
						<div class="line2">
							<div class="line2_time fl">
								2014-07-09<br>
								使用次数：20
							</div>
							<div class="star fr"></div>
						</div>
					</div>
					<div class="down">
						<img src="./img/pic1_03.png" alt="">
					</div>
				</div>
			</div>
			</div>
			
			<div class="lottery">
				<div class="mad_game">
					<div class="mad_game_title">
						<div class="kuangzhuan">
							抽奖游戏<br>
							<span>Lottery <span class="xi">game</span></span>
						</div>
						<div class="sb">
							潮流趣味游戏，引发全民G点，疯狂转发。<br>还不马上购买，植入你要传播的产品？
						</div>
						<div class="clear"></div>
					</div>
				<div class="threepart">
					<div class="box TM_GAME" id="box1">
						<div class="up">
							<div class="game_name">
								剑圣传奇
							</div>
							<div class="purchase">
								<button type="button">购买</button>
							</div>
							<div class="clear"></div>
							<div class="line2">
								<div class="line2_time fl">
									2014-07-09<br>
									使用次数：20
								</div>
								<div class="star fr"></div>
							</div>
						</div>
						<div class="down">
							<img src="./img/pic1_03.png" alt="">
						</div>
						
						
					</div>
					<div class="box  TM_GAME" id="box2">
						
						<div class="up">
							<div class="game_name">
								剑圣传奇
							</div>
							<div class="purchase">
								<button type="button">购买</button>
							</div>
							<div class="clear"></div>
							<div class="line2">
								<div class="line2_time fl">
									2014-07-09<br>
									使用次数：20
								</div>
								<div class="star fr"></div>
							</div>
						</div>
						<div class="down">
							<img src="./img/pic1_03.png" alt="">
						</div>
						
					</div>
					<div class="box  TM_GAME">
						<div class="up">
							<div class="game_name">
								剑圣传奇
							</div>
							<div class="purchase">
								<button type="button">购买</button>
							</div>
							<div class="clear"></div>
							<div class="line2">
								<div class="line2_time fl">
									2014-07-09<br>
									使用次数：20
								</div>
								<div class="star fr"></div>
							</div>
						</div>
						<div class="down">
							<img src="./img/pic1_03.png" alt="">
						</div>
					</div>
				</div>
				</div>
			</div>
			
			<div class="case_share">
				<div class="caseshare_line1">
					<div class="casetitle">
						经典案例分享
					</div>
					<div class="clear"></div>
					<div class="casetitle_fanyi">
						<span class="case">CASE <span class="xi">sharing</span></span>
					</div>
				</div>
				<div class="caseshare_line2">
					<div class="caseshare_box">
						
						<div class="case_logo fl">
							<img src="img/航空logo_03.png" alt="">
						</div>
						<div class="case_word fl">
							南方航空
						</div>
						<div class="clear"></div>
						<div class="date">
							<p>24</p>
							<p>October</p>
						</div>
						<div class="case_star">
							<div class="star fl" id="c-star"></div>
						</div>
					</div>
					<div class="caseshare_box">
						<div class="case_logo fl">
							<img src="img/航空logo_03.png" alt="">
						</div>
						<div class="case_word fl">
							南方航空
						</div>
						<div class="clear"></div>
						<div class="date">
							<p>24</p>
							<p>October</p>
						</div>
						<div class="case_star">
							<div class="star fl" id="c-star"></div>
						</div>
					</div>
					<div class="caseshare_box">
						<div class="case_logo fl">
							<img src="img/航空logo_03.png" alt="">
						</div>
						<div class="case_word fl">
							南方航空
						</div>
						<div class="clear"></div>
						<div class="date">
							<p>24</p>
							<p>October</p>
						</div>
						<div class="case_star">
							<div class="star fl" id="c-star"></div>
						</div>
					</div>
					<div class="caseshare_box">
						<div class="case_logo fl">
							<img src="img/航空logo_03.png" alt="">
						</div>
						<div class="case_word fl">
							南方航空
						</div>
						<div class="clear"></div>
						<div class="date">
							<p>24</p>
							<p>October</p>
						</div>
						<div class="case_star">
							<div class="star fl" id="c-star"></div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</body>
</html>
